<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>后台管理-登陆</title>
    <div th:include="common :: css"></div>
    <style>
        html, body {width: 100%;height: 100%;overflow: hidden}
        body {background: #00FFFF;}
        body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
        .layui-container {width: 100%;height: 100%;overflow: hidden}
        .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
        .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
        .logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
        .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
        .login-form .layui-form-item {position:relative;}
        .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
        .login-form .layui-form-item input {padding-left:36px;}
        .captcha {width:60%;display:inline-block;}
        .captcha-img {display:inline-block;width:34%;float:right;}
        .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
        #canvas {
            float: right;
            display: inline-block;
            border: 1px solid #D2D2D2!important;
            border-radius: 5px;
            cursor: pointer;
            width:100%;
        }
        /*链接颜色是红色，访问过后的链接是白色，鼠标悬浮在链接上时是紫色，点击时的颜色是黄色。*/
        a:link {
            color:red;
            text-decoration:underline;
        }
        a:visited {
            color:purple;
            text-decoration:none;
        }
        a:hover {
            color:blue;
            text-decoration:none;
        }
        a:active {
            color:yellow;
            text-decoration:none;
        }



    </style>
</head>
<body onLoad="document.getElementById('account').focus();GetCookie();">
<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">
            <form class="layui-form" th:action="@{/user/consumer/login}" method="post">
                <div class="layui-form-item logo-title">
                    <h1>后台登录</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username"></label>
                    <input type="text" name="account" id="account" lay-verify="required|account" placeholder="用户名或者邮箱" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password"></label>
                    <input type="password" name="password" id="password" lay-verify="required|password" placeholder="密码" autocomplete="off" class="layui-input" value="">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode"></label>
                    <input type="text" name="captcha" lay-verify="required|captcha" placeholder="验证码" autocomplete="off" class="layui-input verification captcha" value="">
                    <div class="captcha-img">
                        <canvas id="canvas" class="layui-input"></canvas>
                    </div>
                </div>
                <div class="layui-form-item">
                    <input type="checkbox" name="remember" id="remember_password" value="true" lay-skin="primary" title="记住密码">
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login" OnClick="checkInCorrect()">登 入</button>
                </div>

                <a onclick="func7();" >注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a onclick="func8();" >忘记密码？</a>

            </form>
        </div>
    </div>
</div>
<div th:include="common :: js"></div>
<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        //验证码
        var verification_code = [];
        draw(verification_code);
        $("#canvas").on('click',function(){
            draw(verification_code);
        });

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function(){
            $('.layui-container').particleground({
                dotColor:'#7ec7fd',
                lineColor:'#7ec7fd'
            });//ready(function())启动组件
        });


        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.account == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            var verificationCode = verification_code.join("");
            if (data.captcha == '') {
                layer.msg('验证码不能为空');
                return false;
            } else if(data.captcha.toUpperCase() != verificationCode) {
                layer.msg('验证码输入错误');
                $("#canvas").click()
                return false;
            }
            // layer.msg('登录成功', function () {
            //     window.location = '../index.html';
            // });
            return true;
        });

        // 用于校验输入框中的内容 lay-verify="required|password"
        form.verify({
            account: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)){
                    return '用户名不能有特殊字符';
                }
                if(/(^\_)|(\__)|(\_+$)/.test(value)){
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if(/^\d+\d+\d$/.test(value)){
                    return '用户名不能全为数字';
                }
            }

            //我们既支持上述函数式的方式，也支持下述数组的形式
            //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
            ,password: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });
    });

    //验证码样式
    function draw(verification_code) {
        var canvas_width = $('#canvas').width();
        var canvas_height = $('#canvas').height();
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        canvas.width = canvas_width;
        canvas.height = canvas_height;

        var randomCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var randomCodeStr = randomCode.split(",");
        var randomCodeLength = randomCodeStr.length;
        for (var i = 0; i <= 3; i++) { //绘制数字
            var j = Math.floor(Math.random() * randomCodeLength);
            var rotate = Math.random() * 50 * Math.PI / 180;
            var content = randomCodeStr[j];
            verification_code[i] = content.toUpperCase();
            var x = 10 + i * 20;
            var y = 20 + Math.random() * 8;
            context.font = "bold 23px 微软雅黑";
            context.translate(x, y);
            context.rotate(rotate);
            context.fillStyle = randomColor();
            context.fillText(content, 0, 0);
            context.rotate(-rotate);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //绘制线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 60; i++) { //绘制小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }

    // // 使用cookie记住用户名和密码
    //判断用户名和密码是否为空
    function checkInCorrect()
    {
        if (document.getElementById('account').value == "") {
            alert('请输入用户名！')
            document.getElementById('account').focus();
            return false
        }
        if (document.getElementById('password').value == "") {
            alert('请输入密码！')
            document.getElementById('password').focus();
            return false
        }
        else {
            saveInfo();
            return true;
        }
    }

    saveInfo = function () {
        try {
            var isSave = document.getElementById('remember_password').checked;   //保存按键是否选中
            if (isSave) {
                var account = document.getElementById('account').value;
                var password = document.getElementById('password').value;
                if (account != "" && password != "") {
                    SetCookie(account, password);//将用户名和密码保存到cookie
                }
            } else {
                SetCookie("", "");
            }
        } catch (e) {

        }
    }

    //设置cookie存储时长
    function SetCookie(account, password) {
        var Then = new Date();
        Then.setTime(Then.getTime() + 1866240000000);
        document.cookie = "account=" + account + "%%" + password + ";expires=" + Then.toGMTString();
    }

    //从cookie中获得用户名和密码的值，并回显到输入框中
    function GetCookie() {
        var nmpsd;
        var nm;
        var psd;
        var cookieString = new String(document.cookie);
        var cookieHeader = "account=";
        var beginPosition = cookieString.indexOf(cookieHeader);
        cookieString = cookieString.substring(beginPosition);
        var ends = cookieString.indexOf(";");
        if (ends != -1) {
            cookieString = cookieString.substring(0, ends);
        }
        if (beginPosition > -1) {
            nmpsd = cookieString.substring(cookieHeader.length);
            if (nmpsd != "") {
                beginPosition = nmpsd.indexOf("%%");
                nm = nmpsd.substring(0, beginPosition);
                psd = nmpsd.substring(beginPosition + 2);
                document.getElementById('account').value = nm;
                document.getElementById('password').value = psd;
                if (nm != "" && psd != "") {
                    // document.forms[0].checkbox.checked = true;
                    document.getElementById('remember_password').checked = true;
                }
            }
        }
    }



    //resize - 是否允许拉伸,默认情况下，你可以在弹层右下角拖动来拉伸尺寸。如果对指定的弹层屏蔽该功能，设置 false即可。该参数对loading、tips层无效
    // area: ['500px', '300px'],
    // content: "{:url('admin/toReg')}",
    function func7() {
        var index = layer.open({
            title: '注册新用户',
            type: 2,
            shadeClose: true,
            maxMin: true,
            area: ['500px', '500px'],
            skin: 'layui-layer-lan',
            btnAlign: 'r',
            scrollbar:true,
            content: 'http://localhost:8888/user/consumer/toReg',
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    }


    function func8() {
        var index = layer.open({
            title: '找回密码',
            type: 2,
            shadeClose: true,
            maxMin: true,
            area: ['500px', '250px'],
            skin: 'layui-layer-lan',
            btnAlign: 'r',
            scrollbar:true,
            content: 'http://localhost:8888/user/consumer/toFind',
        });
        $(window).on("resize", function () {
            layer.full(index);
        });
    }

</script>
</body>
</html>